<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.keywords" placeholder="关键字" style="width: 200px;" class="filter-item"
        @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.status" placeholder="审核状态选择" clearable style="width: 150px" class="filter-item">
        <el-option label="申请中" :value="0" />
        <el-option label="通过" :value="1" />
        <el-option label="拒绝" :value="2" />
      </el-select>
      <el-select v-model="listQuery.shen" placeholder="申学研权限提升" clearable style="width: 150px" class="filter-item">
        <el-option label="申达人" :value="1" />
        <el-option label="申论讲师" :value="2" />
        <el-option label="申论主讲" :value="3" />
      </el-select>
      <el-select v-model="listQuery.interview" placeholder="面试场权限提升" clearable style="width: 150px" class="filter-item">
        <el-option label="面试讲师" :value="2" />
        <el-option label="面试主讲" :value="3" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
    </div>
    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="ID" prop="id" sortable="custom" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="会员Id" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.member_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="昵称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.member_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.member_phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0" style="color: blue;">申请中</span>
          <span v-if="scope.row.status == 1" style="color: green;">通过</span>
          <span v-if="scope.row.status == 2" style="color: red;">拒绝</span>
        </template>
      </el-table-column>
      <el-table-column label="当前申学研角色" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.role_shen ==0" style="color: #0000F0;">普通会员</span>
          <span v-if="scope.row.role_shen ==1" style="color: green;">申达人</span>
          <span v-if="scope.row.role_shen ==2" style="color: chocolate;">申论讲师</span>
          <span v-if="scope.row.role_shen ==3" style="color: red;">申论主讲</span>
        </template>
      </el-table-column>
      <el-table-column label="申请申学研角色" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.shen ==0">未申请</span>
          <span v-if="scope.row.shen ==1" style="color: green;">申达人</span>
          <span v-if="scope.row.shen ==2" style="color: chocolate;">讲师</span>
          <span v-if="scope.row.shen ==3" style="color: red;">主讲</span>
        </template>
      </el-table-column>
      <el-table-column label="当前面试厅角色" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.role_interview ==0" style="color: #0000F0;">普通会员</span>
          <span v-if="scope.row.role_interview ==1" style="color: green;">面试队长</span>
          <span v-if="scope.row.role_interview ==2" style="color: chocolate;">面试讲师</span>
          <span v-if="scope.row.role_interview ==3" style="color: red;">面试主讲</span>
        </template>
      </el-table-column>
      <el-table-column label="申请面试厅角色" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.interview ==0">未申请</span>
          <span v-if="scope.row.interview ==1" style="color: green;">面试队长</span>
          <span v-if="scope.row.interview ==2" style="color: chocolate;">面试讲师</span>
          <span v-if="scope.row.interview ==3" style="color: red;">主讲</span>
        </template>
      </el-table-column>

      <el-table-column label="处理信息" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.message }}</span>
        </template>
      </el-table-column>

      <el-table-column label="申请时间" align="center">
        <template slot-scope="{ row }">
          {{ _date(row.create_time) }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <div>
            <span>
              <el-button size="small" type="primary" @click="show(scope.row)">处理</el-button>
            </span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog title="处理会员提升权限申请" :visible.sync="show_" width="500px">
      <el-form>
        <el-form-item label="申请审核" label-width="150px">
          <el-select v-model="item.status" placeholder="审核状态选择" clearable style="width: 150px" class="filter-item">
            <el-option label="待审核" :value="0" />
            <el-option label="通过" :value="1" />
            <el-option label="拒绝" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="通过/拒绝理由" label-width="140px">
          <el-input v-model="item.message" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="handle()">确定修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    memberRoleEdit,
    memberRoleList
  } from '@/api/members';

  import waves from '@/directive/waves';
  import {
    parseTime
  } from '@/utils';
  import Pagination from '@/components/Pagination';
  import permission from '@/directive/permission/index.js';
  import {
    dateHandle
  } from '@/api/dateHandle';

  export default {
    components: {
      Pagination
    },
    directives: {
      waves,
      permission
    },
    data() {
      return {
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 10,
        },
        show_: false,
        item: {}
      }
    },
    created() {
      this.getList()
    },
    methods: {
      handle() {
        memberRoleEdit({
          id: this.item.id,
          status: this.item.status,
          message: this.item.message
        }).then(res => {
          if (res.code == 20000) {
            this.$message({
              type: 'success',
              message: res.msg
            });
            this.show_ = false;
            this.getList()
          }
        })
      },
      show(item) {
        this.item = item
        this.show_ = true
      },
      _date(t) {
        return dateHandle('Y-m-d H:i:s', t);
      },
      getList() {
        this.listLoading = true;
        memberRoleList(this.listQuery).then(res => {
          this.list = res.data.data
          this.total = res.data.total

          setTimeout(() => {
            this.listLoading = false
          }, 0.3 * 1000)
        });
      },

    }

  };
</script>
